<template>
  <div class="shop">
    <!-- 头部 -->
    <shop-header></shop-header>
    <!-- 商品列表 -->
    <!-- <Common-goods-list></Common-goods-list> -->
    <div>
      <div class="shop-goods" v-for="item in shopList">
        <router-link  :to="{path:'/VipDetail/'+ item.id}">
          <img :src="item.thumbnail" alt>
          <div class="shop-goods-info">
            <p>{{item.goods_title}}</p> 
            <p>
              价格：{{item.price}}
            </p>
            <p>
              会员价：<em>￥<i>{{item.market_price}}</i></em>
            </p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
// import CommonGoodsList from '../Common-goods-List/Common-goods-List';
import shopHeader from "./components/Shop-header";
// import axios from "axios";
import qs from 'qs'
import wx from 'weixin-jsapi'
import url from 'url'
// import VueAxios from 'vue-axios'
export default {
  name: "Shop",
  data() {
    return {
      shopList: [],
      url:'http://api.huiwanzhong365.com',
    };
  },
  components: {
    // CommonGoodsList,
    shopHeader
  },
  methods: {
    switchTo(path){
      // console.log(this.$router)
      this.$router.replace(path)
    },
    //列表
    getList: function() {
      console.log(this.$route.query.id)
      var that = this
      var openid = localStorage.getItem("openid")
      var draw = { 
          openid:openid,
          merchant_id: 1
      }
      that.$http.post('/vipmember/index/getShopGoods',qs.stringify(draw)).then(res=>{
          console.log(res.data)
          for (var i in res.data.data) {
             res.data.data[i].thumbnail = this.url + res.data.data[i].thumbnail 
          }
          this.shopList = res.data.data;
          // this.attr = res.data.attr
      }).catch(err=>{
          console.log(err)
      })
    }
  },
  mounted() { 
    this.getList();
  }
};
</script>

<style scoped>
/* .shop { */
  /* width: 94%;
  display: inline-block;
  margin-left: 3%;
} */
/* .shop-goods {
  width: 47%;
  float: left;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 10px;
  padding-bottom: 10px;
} */
.shop-goods img {
  width: 100%;
  height: 173px;
}
.shop-goods-info p:nth-child(1) {
  width: 94%;
  margin: 0 auto;
  font-size: 13px;
  padding: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}
.shop-goods-info p:nth-child(2) {
  width: 94%;
  margin: 0 auto;
  font-size: 12px;
  color: #999;
}
.shop-goods-info p:nth-child(3) {
  font-size: 12px;
  color: #999;
  width: 94%;
  margin: 0 auto;
}
.shop-goods-info p:nth-child(3) em {
  color: #fc2847;
}
.shop-goods-info p:nth-child(3) em i {
  color: #fc2847;
  font-size: 16px;
}
/* .shop .shop-goods:nth-child(odd) {
  margin-right: 6%;
} */
</style>